<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例8</title>
    <style>
        .one{
            width: 200px;
            height: 200px;
            border: 3px solid black;
        }
        /*.one:hover{*/
        /*    background-color: #009678;*/
        /*}*/
    </style>
    <script src="jquery.js"></script>
    <script>
        //实用主义
        $(function (){
            // $(".one").mouseenter(function (){
            //     $(this).css("background-color","red");
            //     console.log("进入")
            // }).mouseleave(function (){
            //     $(this).css("background-color","");
            //     console.log("离开")
            // })

            $(".one").hover(function (){
                $(this).css("background-color","red");
                console.log("进入")
            },function (){
                $(this).css("background-color","");
                console.log("离开")
            })
        })
    </script>
</head>
<body>
    <div class="one"></div>
</body>
</html>